/*************************VARIABLES AND MISELANIUS *************************/
@backgroundColor:#fcf6de;
@foregroundColor:#fcf6de;
@greenColor: #498e2d;
@lightGreenColor: #c4d868;
@orageColor: #ff6a00;
@lightOrageColor: #ffc627;
@tableColor1:#99BA7D;
@tableColor2:#DCE5C1;

.shadow{
  -moz-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px  5px  7px rgba(0, 0, 0, 0.3);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444');
}

.text-shadow {
  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.3);
}

.text-shadow-big {
  text-shadow: 4px 4px 9px rgba(42, 42, 42, 1);
}

.border-radius {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

.full-circle{
  border-radius:100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
}

.remove-border-radius{
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;  
  -webkit-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -ms-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -o-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -o-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
}

.setMenuHeight{
 height:60px;
}

.setHeaderHeight{
 height:800px;
}

body,html{
  height:100%;
}

/*************************TEXT STYLES***********************/
h1{
	 color:@backgroundColor;
}

h2{
	color: #fff;
	 color:@backgroundColor;
}
h3{
	color: #fff;
	 color:@backgroundColor;
}

p{
	margin: 10px auto;
	color:@backgroundColor;
}

a{
	color: #fff;
	text-decoration: underline;
}

a:hover{
	text-decoration: none;
	 color:@backgroundColor;
}

ul li{
	margin: 10px auto;
	padding: 0;
}


/*************************LAYOUT STYLES*********************/
.container,.container-fluid, .wrapper{
	min-width: 1024px!important;
	margin:0 auto;
}

/*************************HEADER STYLES********************/
.f-header{
  .setHeaderHeight;
  .navbar{
    position: relative;
    z-index: 1000;
    .setMenuHeight;
    margin-bottom:0px;
    background-color:@greenColor;
    .shadow;
  }
  .navbar-inner{
    .setMenuHeight;
    border: 0;
    background: none!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .nav{
    margin: 0 50px;
    .idiomas{
      overflow:hidden
      a{
        float:left;
        display:block;
    }
  }
  }
  .nav li a{
   height: 15px;
   line-height: 30px;
   color: #fff;
   font-weight: 400;
   margin-top: -30px;
   padding-top:40px;
 }
 .nav li a:hover, .nav li a.active{
  background: @lightGreenColor;
  color: #fff;
}
.dropdown .caret{
  margin-top: 12px!important;
  border-top-color: #fff!important;
  border-bottom-color: #fff!important;
}
.dropdown.open a{
  color: #ffffff!important;
  background-color:@lightGreenColor!important;
}
.dropdown-menu{
  margin: 0; padding: 0;
  border-radius: 0; border: none;
  background-color:@lightGreenColor;
}
.dropdown-menu::after,
.dropdown-menu::before{
  display: none!important;
}
.dropdown-menu li:hover a{
  text-decoration: underline;
}

.dropdown-menu li a{
  height: auto;
  line-height: 15px;
  font-weight: 400;
  margin-top: 0px;
  padding-top: 0px;
  text-decoration: none;
}
.f-logo{
  padding: 0; 
  margin-left: -21px;
  background-repeat: no-repeat;
  background-position: center 5px;
  background-color: #fff;
}
.f-logo img{
  margin: -1px 0 0 0;
}
.f-logo.visible-desktop{
  width: 200px; height: 140px;   
  background-image: url("../img/fructa-logo.jpg");
  background-position: center 0;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius:100%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
.f-logo.hidden-desktop{
  width: 150px; height: 51px;   
  background-image: url("../img/fructa-fruitless.png");
  background-size: 80%;
  .border-radius;
}
}

/*************************FOOTER STYLES********************/
.f-footer{
  text-align:center;
  padding:20px 0;
  p{
    color: @greenColor!important;
  }
}

/*************************GRID STYLES********************/
.f-grid{
  margin-top:25px;
  .f-grid-row{
    margin-bottom:25px;
  }
  .f-grid-margin{
    margin-bottom:25px;
  }
  .f-grid-txt{
    background:@greenColor;
    padding:20px;
    h2{
      margin:0px;
    }
  }
  .f-grid-img{
    overflow:hidden;
    img{
      width:100%;
    }
  }
  .f-grid-img-ajust{
    height:312px;
  }
  .grid-bg1{
    background:#5FC08F url("../img/grid-bg-1.png");
  }
  .grid-bg2{
   background:#00AC64 url("../img/grid-bg-2.png");  
 }
 .grid-bg3{
   background-image:url("../img/grid-bg-3.png");     
 }

}
/*************************BACKGROUND STYLES*********************/
.parallax-bg{
  overflow: hidden;
  position:absolute;
  top: 0; left: 0;
  width:100%; min-height: 800px;
  .setHeaderHeight;
  z-index:-1000;
  text-align: center;
  img{
    width: 100%;
  }
}

@media (max-width: 1218px){
  .parallax-bg{
    img{
      height: 100%;
      width: auto; max-width: auto;
    }
  }
}

/*************************QUALITY PAGE*********************/
.certifications{
  list-style:none;
  width:100%;
  height:730px;
  margin:0px;
  h2{
    width:160px;
    margin:0;
    padding-top:80px;
    color:@greenColor;
    font-size:14px;
    text-align:center;
    background:@backgroundColor;
  }
  li{
    display: table;
    margin:0px;
    .certf{
      position: relative;
      width:160px;
      min-height:100px;
      margin:0 auto;
      background:@backgroundColor;
      background-repeat: no-repeat;
    }
    .certf-descp{
      visibility: hidden;
      min-height:100px;
      padding: 8px 8px 8px 27px; margin:0;
      background:@lightGreenColor;
      p,span,a{
        font-size: 13px;
        margin: 0;
      }
      span{
        font-weight: 600;
        text-transform: uppercase;
      }
      a{
        color:@greenColor;
      }
    }
  }

  li:hover{
    .certf{
      background-color: #ffffff;
      background-position: -160px center;
    }
    .certf-descp{
      visibility: visible;
    }
    .white-arrow{
     display:block;
   }
   .certf-descp:hover{
    display:block;
  }
}

li .white-arrow{
 display: none;
 position: absolute;
 right: -27px;
 top: 19.5px;
}

.certf.irma{
  background:url("../img/irma-logo.jpg") no-repeat @backgroundColor 0 center;
}

.certf.kosher{
  background:url("../img/kosher-logo.jpg") no-repeat @backgroundColor 0 center;
}

.certf.oko{
  background:url("../img/oko-logo.jpg") no-repeat @backgroundColor 0 center;
}

.certf.lsqa{
  background:url("../img/lsqa-logo.jpg") no-repeat @backgroundColor 0 center;
}

.certf.iqnet{
  background:url("../img/iqnet-logo.jpg") no-repeat @backgroundColor 0 center;
}

.certf.qaustria{
  background:url("../img/qautria-logo.jpg") no-repeat @backgroundColor 0 center;
}
}

/*************************PRODUCT PAGE*********************/
.f-product-cat{
  clear:both;
  padding:20px;
  width:85%;
  margin:0 auto;
  .f-product-block{
    height:610px;
     background:url("../img/product-block-bg.png");
    padding:17px;
    text-align:center;
    transition:background 1s;
    -webkit-transition:background 1s; /* Safari */
    img{
      width:180px;
      .full-circle;
      .shadow;
    }
    ul{
      text-align:left;
      margin:0px;
      li{
        list-style:none;
        h2{
          font-size:25px;
          text-align:center;
          color:@orageColor;
        }
        a{
          text-decoration:none;
          font-size:13px;
        }
      }
    }
  }

 .f-product-block:hover{
   background:url("../img/product-block-bg-hover.png");
      

    li{
     a:hover{
      color:@lightOrageColor;
    }
    h2{
      color:@lightOrageColor;
    }
  }
}
.f-product-block:first-child{
  border-top-left-radius:60px;
}
.f-product-block:last-child{
  border-bottom-right-radius:60px;  
}

}
.f-product-page{
  h2{
    color:@orageColor;
    margin: 30px auto;
  }
  span{
  color:#8A8A8A;
  font-style: italic;
  }

  h3{
    color:@greenColor;
  }

  .f-product-description{
    .span9{
      background:@greenColor;
      padding:20px;
      h3{
        color: @foregroundColor;
      }
    }    
  }
  table {
    width:100%; 
    thead{
      border-spacing: 0;
    }
    tr{
      border-top: 5px solid @backgroundColor;
      td{
       text-align:center;
       padding:10px;
       background: #cfdcb2;
       border-right: 5px solid @backgroundColor;
       color:@greenColor;
     }
     th{
      background: #a2c285;
      border-right: 5px solid @backgroundColor;
      padding:10px;
    }
  }
}
}

/*************************SUSTAINABILITY PAGE*********************/
.f-sustainability-header{
  padding-top: 110px;
  h1{
    margin-bottom: 20px;
  }
  p{
    font-size: 16px;
  }
}

.f-sustainability-grid{
 .f-grid-orange{
  background:#fa9a31 url("../img/grid-bg-4.png");
  
}
.f-grid-orange2{
  background:#f65f00 url("../img/grid-bg-5.png");
}
}

/*************************CONTACT PAGE*********************/

.f-contact{
  padding-top: 80px;
  font-size: 1.1em;
  label{
    font-size: 1.1em;
  }
  input[type="text"],input[type="email"],input[type="tel"]{
    width: 90%;
    height: 20px;
    line-height: 25px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin-bottom: 10px;
  }
  textarea{
   width: 90%;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   margin-bottom: 10px;
 }
 select{
  width: 93%;
  height: 30px;
  line-height: 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin-bottom: 10px;
}
.btn{
  height: 40px;
  line-height: 30px;
  font-size: 1.1em;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
input[type="text"],input[type="email"], textarea, select{
background: @backgroundColor;
}
}